<template><!--总积分-->
    <div style="height:100%;">
        <navbar :title="$t('personal_activity_credits')"></navbar>
        <div class="content-noBottom" :class="{'height-100' : creditTotal === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&creditTotal>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getCreditDetail"
                >
                    <div class="bottom-shadow white-bg module-box-08">
                        <p class="font-size16" style="font-weight: bold;margin-bottom: 27px;">{{ $t("rank_credits_distributed") }}</p><!--积分分布-->
                        <ul class="clearfix">
                            <li>
                                <div>
                                    <div class="box-24 clearfix">
                                        <div class="box-color-01" :class="{'cur': creditInfo.creditStudy == 0}" :style="{ width:(((+creditInfo.creditStudy) / ((+creditInfo.creditActivity) + (+creditInfo.creditStudy))) * 100) + '%' }"></div>
                                        <div class="box-color-02" :class="{'cur': creditInfo.creditActivity == 0}" :style="{ width:(((+creditInfo.creditActivity) / ((+creditInfo.creditActivity) + (+creditInfo.creditStudy))) * 100) + '%' }"></div>
                                    </div>
                                    <ul class="margin-top15 box-25 clearfix">
                                        <li>
                                            <p class="font-size20">{{ creditInfo.creditActivity }}</p>
                                            <p class="color999">{{ $t("credits_activity") }}</p>
                                        </li>
                                        <i></i>
                                        <li>
                                            <p class="font-size20">{{ creditInfo.creditStudy }}</p>
                                            <p class="color999">{{ $t("credits_train") }}</p>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li style="height: 57px;">
                                <div class="box-table" style="width:100%;height: 57px;margin-top: 20px;">
                                    <div class="box-table-cell">
                                        <p class="word-01" style="font-weight: bold;">{{ ((+creditInfo.creditStudy) + (+creditInfo.creditActivity)) || 0 }}</p>
                                        <p class="color999">{{ $t("personal_activity_credits") }}</p><!--总积分-->
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
    <!--                <div class="margin-top10 bottom-shadow" v-for="(info, index) in creditDetail" :key="index">-->
    <!--                    <p class="color666" style="padding: 10px 15px;">{{ info.createDate }}</p>-->
    <!--                    <div class="white-bg module-box-09">-->
    <!--                        <ul>-->
    <!--                            <li v-for="(listInfo, index) in info.userCreditsDetailLogList" :key="index">-->
    <!--                                <p v-if="listInfo.ucl_source_type && listInfo.ucl_source_type === 'DAY_SIGN'">{{ $t('point_not_sign') }}</p>-->
    <!--                                <p v-else-if="listInfo.ucl_source_type && listInfo.ucl_source_type === 'DAYS_SIGN'">{{ $t('sign_in_tip_days') }}</p>-->
    <!--                                <p v-else-if="listInfo.ucl_source_type">{{ $t('user_day_task') + '-' + $t('task_' + listInfo.ucl_source_type) }}</p>-->
    <!--                                <p v-else>{{ creditsName(listInfo.creditsType.cty_title, listInfo.creditsType.cty_manual_ind) }}</p>-->
    <!--                                <div class="clearfix">-->
    <!--                                    <span class="color999 font-size11">{{ listInfo.ucl_create_timestamp | conversionTime }}</span>-->
    <!--                                    <span style="float: right;font-weight: bold;" :style="{'color' : listInfo.ucl_relation_type == 'COS' ? '#fc355d' : '#075ebb'}">{{ (listInfo.ucl_point == 0 || listInfo.ucl_point > 0) ? ('+' + listInfo.ucl_point) : listInfo.ucl_point }}</span>-->
    <!--                                </div>-->
    <!--                            </li>-->
    <!--                        </ul>-->
    <!--                    </div>-->
    <!--                </div>-->
                    <div class="white-bg module-box-09">
                        <ul>
                            <li v-for="(listInfo, index) in creditDetail" :key="index">
                                <p v-if="listInfo.uclSourceType && listInfo.uclSourceType === 'DAY_SIGN'">{{ $t('point_not_sign') }}</p>
                                <p v-else-if="listInfo.uclSourceType && listInfo.uclSourceType === 'DAYS_SIGN'">{{ $t('sign_in_tip_days') }}</p>
                                <p v-else-if="listInfo.uclSourceType">{{ $t('user_day_task') + '-' + $t('task_' + listInfo.uclSourceType) }}</p>
                                <p v-else-if='listInfo.creditCtyManualInd===0 || listInfo.creditCtyManualInd===1'>{{ creditsName(listInfo.creditName) }}</p>
                                <p v-else>{{listInfo.creditName}}</p>
                                <div class="clearfix">
                                    <span class="color999 font-size11">{{ listInfo.creditCreateTime }}</span>
                                    <span style="float: right;font-weight: bold;" :style="{'color' : listInfo.creditSource && listInfo.creditSource == 'COS' ? '#fc355d' : '#075ebb'}">{{ (listInfo.creditPiont == 0 || listInfo.creditPiont > 0) ? ('+' + listInfo.creditPiont) : listInfo.creditPiont }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--暂无数据-->
                    <div v-if="!isLoading && creditTotal === 0" class="box-table" style="width:100%;height:100%;">
                        <div class="box-table-cell" style="text-align: center;">
                            <div class="no-data">
                                <img src="../../../static/images/no-data.png" alt=""/>
                                <p class="color999">{{ $t('no_data') }}</p>
                            </div>
                        </div>
                    </div>
                    <common-loading :isLoading="isLoading"></common-loading>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TotalPoints',
    data() {
        return {
            pageNo: 1,
            creditTotal: 0,
            encId: '',
            creditInfo: {}, //我的积分信息
            creditDetail: [], //积分详情
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getCreditInfo();
                this.getCreditDetail('refresh');
                this.isRefresh = false;
            }, 900);
        },
        //我的积分信息
        getCreditInfo() {
            this.$axios({
                method: 'GET',
                // url: '/app/personal/home/json/' + this.encId
                url: `/app/api/trainee/my/credits-summary`
            }).then((res) => {
                this.creditInfo = res.data;
            });
        },
        //我的积分详情
        getCreditDetail(option) {
            this.$axios({
                method: 'GET',
                // url: '/app/personal/mobile/creditDetail/' + this.encId,
                url: `/app/api/trainee/my/credits-detail/list`,
                params: {
                    pageNo: this.pageNo
                }
            }).then((res) => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.creditDetail = res.data.results;
                    } else {
                        this.creditDetail = [...this.creditDetail, ...res.data.results];
                    }
                    this.creditTotal = res.data.totalRecord;
                    this.isLoading = false;
                    this.pageNo++;
                    if (this.creditDetail.length >= this.creditTotal) {
                        this.finished = true;
                    }
                }
            });
        },
        creditsName(ctyTitle, ctyManualInd) {
            if (!ctyManualInd) {
                return this.$t('credits_' + ctyTitle);
            } else if (ctyManualInd && (ctyTitle === 'INTEGRAL_EMPTY' || ctyTitle === 'ITM_IMPORT_CREDIT' || ctyTitle === 'API_UPDATE_CREDITS' || ctyTitle === 'ITM_INTEGRAL_EMPTY')) {
                return this.$t('credits_' + ctyTitle);
            } else {
                return ctyTitle;
            }
        }
    },
    mounted() {
        //获取用户id
        this.encId = this.$route.params.encId;
        this.getCreditInfo();
        this.getCreditDetail();
    }
};
</script>

<style scoped lang="less">
    .box-24 {
        width: 100%;
        height: 16px;
        border-radius: 8px;
        background: #f5f5f5;
        .box-color-01 {
            float: left;
            height: 100%;
            background: #075ebb;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            &.cur {
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            }
        }
        .box-color-02 {
            float: left;
            height: 100%;
            background:#5186f0;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            &.cur {
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            }
        }
    }
    .module-box-08 .box-25 {
        li {
            text-align: center!important;
            width: calc((100% - 1px) / 2) !important;
        }
        i {
            float: left;
            height: 16px;
            border-right: 1px solid #cccccc;
            margin-top: 16px;
        }
    }
    .module-box-08 {
        padding: 27px 15px 30px;
    }
    .module-box-08 ul li:nth-of-type(1) {
        float: left;
        width: 60%;
    }
    .module-box-08 ul li:nth-of-type(2) {
        float: right;
        width: 40%;
        text-align: right;
    }
    .box-11 {
        padding-left: 95px;
    }
    .box-11 span {
        float: left;
        margin-left: -95px;
    }
    /*.box-color-01 {
        width: 80px;
        height: 24px;
        background: #f5f5f5;
        border-radius: 12px;
    }
    .box-color-01 i {
        display: inline-block;
        height: 24px;
        background: #075ebb;
        border-radius: 12px;
    }*/
    .word-01 {
        font-size: 24px;
        color: #075ebb;
    }
    .module-box-09 ul li {
        border-bottom: 1px solid #cccccc;
        padding: 13px 15px;
    }
    .module-box-09 ul li:nth-last-child(1) {
        border-bottom: none;
    }
    .module-box-09 ul li p{
        font-size: 14px;
    }
    .module-box-09 ul li div {
        margin: 5px 0 0;
    }
</style>
